<template>
  <view class="shop-detail">
    <!-- 上 -->
    <view class="top">
      <!-- 图片轮播 -->
      <uni-swiper-dot :info="swiperInfo" :current="currentState" field="content" mode="round">
        <swiper class="swiper-box" :autoplay="true" @change="handleOneChange">
          <swiper-item v-for="(item,index) in swiperInfo" :key="index">
            <view class="swiper-item">
              <image :src="item.imgUrl" mode="aspectFill" style="width: 100%;"></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <!-- 标题 -->
      <uni-card class="title-card">
        <view class="title">
          B-5mmPGA单面晨星白PET0.25（中纤/背面素板）
        </view>
        <view class="price">
          <span class="red-c padR10">￥ 1200</span>
          <span> 原价： <span class="line-word"> 1800 </span> </span>
          <span> 库存：50 </span>
          <span> 提货点：家能仓 </span>
        </view>
      </uni-card>
    </view>
    <view class="tip">
      <span> <uni-icons type="checkbox"></uni-icons>  自营正品促销 </span>
      <span> <uni-icons type="checkbox"></uni-icons> 物流自提 </span>
      <span> <uni-icons type="checkbox"></uni-icons> 清仓无售后 </span>
    </view>
    <!-- 中 -->
    <view class="middle">
      <uni-card title="商品规格" extra="120*180*200" note="Tips">
         <uni-row>
           <uni-col :span="8">瑕疵介绍：</uni-col>
           <uni-col :span="16">可自定义内容及样式，可自定义内容及样式，可自定义内容及样式。可自定义内容及样式，可自定义内容及样式，可自定义内容及样式</uni-col>
         </uni-row>
      </uni-card>
      <uni-card title="商品详情"  note="Tips">
         <uni-row>
           <uni-col :span="8">商品详情：</uni-col>
           <uni-col :span="16" style="margin-bottom: 50px;">
             <image src="/static/images/my-icons/icon2.png" mode="商品详情" class="img"></image>
             <image src="/static/images/tab_icons/cart-active.png" mode="商品详情" class="img"></image>
           </uni-col>
         </uni-row>
      </uni-card>
    </view>
    <!-- 下 -->
    <view class="bottom">
      <uni-goods-nav 
        :fill="true" 
        :options="options" 
        :button-group="rightBtnOpt" 
        @click="onClickLeft"
      	@buttonClick="btnClickRight" 
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

  
  // 上 -- 轮播图
  const swiperInfo = ref([
    { content: 'aaa',imgUrl: '/static/images/apply-img/好评选择.png' },
    { content: 'bbb',imgUrl: '/static/images/apply-img/好评.png' },
    { content: 'ccc',imgUrl: '/static/images/apply-img/好评选择.png' }
  ])
  const currentState = ref(0)  // 当前图
  const handleOneChange = (e)=>{
    currentState.value = e.detail.current
  }
  
  // 下 -- 按钮
  const options = ref([
    { icon: 'chat', text: '客服' },
    { icon: 'shop', text: '店铺', info: 2, infoBackgroundColor: '#007aff', infoColor: "#f5f5f5" }, 
    { icon: 'cart', text: '购物车', info: 2 },
  ])
  const rightBtnOpt = ref([{
    text: '立即购买',
    backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
    color: '#fff'
	}])
  const onClickLeft = (e)=>{
    uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
  }
  const btnClickRight = (e)=> {
    console.log(e)
    options.value[0].info++ 
  }
  
</script>

<style lang="scss">
  .shop-detail{
    width: 100%;
    height: 100%;
    // 一
    .top {
      .swiper-box{
        height: 250px;
        swiper-item {
          height: 100%;
        }
      }
      .title-card .title{
        margin-bottom: 25px;
      }
      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
      }
    }
    // 二
    .tip{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
    }
    .middle {
      margin-bottom: 200px;
      .img {
        width: 100%;
      }
    }
    // 三
    .bottom {
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 999;
      padding-bottom: 20px;
      background-color: #fff;
      margin-top: 50px;
    }
  }
  
  
  
</style>